<template>

  <b-modal id="modal-avatar" ref="modal-avatar" :hide-header="true" :no-close-on-backdrop="true" :no-close-on-esc="true"
           centered class="avatar"
           hide-footer title="修改用户头像">
    <div class="d-block">
      <h4 class="title d-flex justify-content-between"><span>上传用户头像</span>
        <b-button size="sm" @click="hide">
          <b-icon-x></b-icon-x>
        </b-button>
      </h4> 
      <div class="upload">
        <input type="file" @change="upLoadAvatar">
        <b-img v-if="avatarUrl" :src="avatarUrl" class="img-thumbnail"></b-img>
        <b-button block class="upSend" variant="success">点击上传图片</b-button>
      </div>
    </div>
  </b-modal>

</template>

<script>
export default {
  props: {
    avatar: {
      type: String,
      required: true
    },
  },
  name: "modal-avatar",
  data() {
    return {
      file: null,
      avatarUrl: this.avatar,
      show: false
    }
  },
  computed:{

  },
  methods: {
    hide() {
      this.$refs['modal-avatar'].hide()
    },
    upLoadAvatar(e) {
      console.log(e.target.files[0])
      this.$commonApi.upLoadAvatar(e)
          .then((res) => {
            this.avatarUrl = res.data.url;
            this.$userApi.upLoadAvatarAdd(res.data.url)
                .then((res) => {
                  if (res.ret === 200) {
                    this.show = true
                    this.$refs['modal-avatar'].hide()
                    this.$emit('on-change')
                  }
                })
          })
    }
  }
}
</script>

<style lang="scss">
.avatar {
  h4.title {
    padding: 15px 0;
    font-size: 16px;
    font-weight: normal;
  }

  .b-alert {
    position: fixed;
    right: 10px;
    top: 10px;
  }
}

.upload {
  position: relative;
  min-height: 300px;
  width: 100%;
  overflow: hidden;

  .img-thumbnail {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }

  .upSend {
    position: absolute;
    top: 5px;
    right: 5px;
  }

  input {
    opacity: 0;
    width: 100%;
    min-height: 300px;
    max-height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9;
  }
}


</style>